<template>
    <div class="blog-item">
        <div class="left">
            <img v-if="blogItem.imgURL !== ''" :src="blogItem.imgURL" :alt="blogItem.title" class="left-img">
        </div>
        <div class="content">
            <div class="title">
                <p class="text">{{ blogItem.title }}</p>
            </div>
            <div class="description">
                <p class="text">{{ blogItem.desc }}</p>
            </div>
            <div class="operation">
                <div class="isLike">
                    <div class="like">
                        <el-icon :size="16">
                            <Like />
                        </el-icon>
                        <span class="number">{{ blogItem.likeNum }} 赞</span>
                    </div>
                    <div class="unlike">
                        <el-icon :size="16">
                            <Unlike />
                        </el-icon>
                        <span class="number">{{ blogItem.unlikeNum }} 踩</span>
                    </div>
                </div>
                <div class="author">
                    作者: {{ blogItem.author }}
                </div>
                <div class="release-time">
                    发布时间: {{ blogItem.releaseTime }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import Like from "@/components/Like/index.vue"
import Unlike from "@/components/Unlike/index.vue"
const props = defineProps({
    blogItem: {
        type: Object
    }
})
</script>

<style lang="scss" scoped>
.blog-item {
    display: flex;
    box-sizing: border-box;
    height: 145px;
    padding: 20px 10px;
    transition: .2s;
}

.blog-item:hover {
    background-color: #FFFFFF;
    transition: .2s;
    cursor: pointer;
}

.left-img {
    width: 175px;
    height: 100px;
    margin-right: 20px;
}

.content {
    .title {
        .text {
            font-size: 18px;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }
    }

    .title:hover {
        text-decoration: underline;
    }

    .description {

        .text {
            color: #606266;
            font-size: 14px;
            line-height: 1.5;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
    }

    .operation {
        color: #606266;
        font-size: 14px;
        margin-top: 10px;
        display: flex;

        .isLike {
            display: flex;
            margin-right: 20px;
        }

        .like,
        .unlike {
            display: flex;
            align-items: center;
            margin-right: 10px;

            .el-icon {
                margin-right: 5px;
            }
        }

        .like:hover,
        .unlike:hover {
            color: #A8ABB2;
        }

        .author {
            margin-right: 20px;
        }

        .author:hover {
            color: #A8ABB2;
        }
    }

}
</style>